<template>
	<div class="comment">
	<div ></div>
	<span @click="change('collect',article,critics)">
		<img v-if="!isCollect" src="../../static/images/collection-nomal.png">
		<img v-if="isCollect" src="../../static/images/collection-select.png">
	</span>
	<span @click="change('love',article,critics)">
		<img v-if="!isthumb_up" src="../../static/images/thumb-up-nomal.png">
		<img v-if="isthumb_up" src="../../static/images/thumb-up-select.png">
	</span>
	
   <span @click="change('comments',article,critics)">
		<img v-if="!iscomments" src="../../static/images/comments.png">
	</span>
	<textarea v-if="iscomments" rows="3" cols="20" v-model="msg"></textarea>
	<div v-if="iscomments" @click="subAction(article,critics)" class="submit">发布</div>
	</div>
</template>

<script>
export default {
	 data: function() {
            return {
              iscomments:false,
              msg:""
            }
        },
    computed: {
            article: function() {
                return this.$store.state.comm.comments.article
            },
            critics: function() {
                return this.$store.state.comm.comments.critics
            },
            isCollect: function() {
                return this.$store.state.comm.comments.isCollect
            },
            isthumb_up: function() {
                return this.$store.state.comm.comments.isthumb_up
            },
            isthumb_down: function() {
                return this.$store.state.comm.comments.isthumb_down
            }
        },
     created(){

 
     },
	 methods: {
		change:function(type,aid,uid){
		var _self=this;	
		var tt;
		switch(type){
			case 'comments':
			_self.iscomments=!_self.iscomments;
			break;
			case 'collect':
			if (_self.$store.state.comm.comments.isCollect==0) {
               tt=1
			}else{
				tt=0;
			}
			var json={
                 acticle:aid,
                 author:uid,
                 type:type+"_"+tt,
                 msg:""
			}
			
			_self.api.commentActicle(json).then(res => {  
			     _self.$store.commit('changecomments', {
                  isCollect:tt
             })

            }).catch(function(error) {
                console.log(error);
            });
			break;
			case 'love':
			if (_self.$store.state.comm.comments.isthumb_up==0) {
               tt=1
			}else{
				tt=0;
			}
			var json={
                 acticle:aid,
                 author:uid,
                 type:type+"_"+tt,
                 msg:""
			}
			
			_self.api.commentActicle(json).then(res => {  
				console.log(res);
			     _self.$store.commit('changecomments', {
                  isthumb_up:tt
             })

            }).catch(function(error) {
                console.log(error);
            });
			break;
			case 'unlike':
			var json={
                 acticle:aid,
                 author:uid,
                 type:type+"_1",
                 msg:""
			}
			if (_self.$store.state.comm.comments.isthumb_down==0) {
               tt=1
			}else{
				tt=0;
			}
			_self.api.commentActicle(json).then(res => {  
			     _self.$store.commit('changecomments', {
                  isthumb_down:tt
             })

            }).catch(function(error) {
                console.log(error);
            });
			break;
		 }
		},
		subAction:function(aid,uid){
		 var _self=this;	
          var json={
                 acticle:aid,
                 author:uid,
                 type:'content_'+_self.msg
                
			}
			
			_self.api.commentActicle(json).then(res => {  
			    
            

            }).catch(function(error) {
                console.log(error);
            });
		}
	}
}
</script>


<style lang="scss" scoped>
 @import "../../static/css/comment.scss";
</style>